<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="backstage/common/head::head"></head>
<style>

    .ztree li span.button {
        background-position-x: -144px;
        background-position-y: -1px;
    }

    #content-container:before {
        background: none;
    }

    .lay-win {
        display: none;
    }
    #demo-nifty-settings {
        display: none !important;
    }
</style>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
    <div id="container" class="effect aside-float aside-bright mainnav-lg">

        <!--NAVBAR-->
        <!--===================================================-->
        <header id="navbar" th:replace="backstage/common/header::header"></header>
        <!--===================================================-->
        <!--END NAVBAR-->

        <div class="boxed">
            <div id="content-container">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <div id="page-content">
                    <button id="demo-btn-addrow" class="btn btn-purple" onclick="addArticle()"><i
                            class="demo-pli-add"></i> 增加</button>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th style="width:50px;"> 序号 </th>
                            <th> 用户名 </th>
                           <!-- <th> 姓名 </th>-->
                            <th> 邮箱 </th>
                            <th> 是否会员 </th>
                            <th> 状态 </th>
                            <th style="width:250px;"> 操作 </th>
                        </tr>
                        </thead>
                        <tbody id="user_table_body"></tbody>
                    </table>
                    <div id="page" style="align-content: center;text-align: center"></div>
                </div>
            </div>
            <!--===================================================-->
            <!--END CONTENT CONTAINER-->

            <!--MAIN NAVIGATION-->
            <!--===================================================-->
            <nav id="mainnav-container" th:replace="backstage/common/left::left(2)"></nav>
            <!--===================================================-->
            <!--END MAIN NAVIGATION-->

        </div>
        <!-- FOOTER -->
        <!--===================================================-->
        <footer id="footer" th:replace="backstage/common/foot::footer"></footer>
        <!--===================================================-->
        <!-- END FOOTER -->
        <!-- SCROLL PAGE BUTTON -->
        <!--===================================================-->
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
        <!--===================================================-->
    </div>
    <!--===================================================-->
    <!-- END OF CONTAINER -->
    <div class="lay-win">
        <form class="form-horizontal" action="/backstage/user/userAdd">
            <input type="hidden" id="input_id" name="id"/>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="input_username">用户名</label>
                    <div class="col-sm-6">
                        <input type="text" name="userName" placeholder="请输入用户名" class="form-control input-sm" id="input_username">
                    </div>
                </div>
               <!-- <div class="form-group">
                    <label class="col-sm-3 control-label" for="input_name">姓名</label>
                    <div class="col-sm-6">
                        <input type="text" name="name" id="input_name" placeholder="请输入姓名" class="form-control input-sm" >
                    </div>
                </div>-->
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="input_email">邮箱</label>
                    <div class="col-sm-6">
                        <input type="text" name="email" id="input_email" placeholder="请输入邮箱" class="form-control input-sm" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label" >是否会员</label>
                    <div class="col-sm-6">
                        <input type="radio" name="isVip" value="1" >是
                        <input type="radio" name="isVip" value="0" >否
                    </div>
                </div>
                <div class="form-group">
                        <label class="col-sm-3 control-label" for="user_state">状态</label>
                        <div class="col-sm-6">
                            <select placeholder="请选择用户状态" class="form-control" id="user_state" name="state">
                                <option>请选择</option>
                                <option value="5">注销</option>
                                <option value="6" selected>正常</option>
                                <option value="7">封禁</option>
                            </select>
                        </div>
                    </div>
            </div>
        </form>
    </div>

</body>
<script th:inline="javascript">
    function page(totalCount,currPage) {
        layui.use(['laypage'], function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                , count: totalCount //数据总数，从服务端得到
                , curr: currPage
                , limit: 10
                , jump: function (obj, first) {
                    //首次不执行
                    if (!first) {
                        var page = parseInt(obj.curr)-1;
                        $.ajax({
                            url: '/backstage/user/userPage',
                            type: 'get',
                            data:{"pageIndex":page,"pageSize":10},
                            success: function (res) {
                                var data ="";
                                if(res!=null){
                                    $.each(res.list,function(i,n) {
                                        data += `<tr>
                            <td>${n.id}</td>
                            <td>${n.userName}</td>
                            <td>${n.email}</td>

                            `;
                                        var state="无";
                                        if(n.state==5){
                                            state="注销";
                                        }else if(n.state==6){
                                            state="正常";
                                        }else if(n.state==7){
                                            state="禁封";
                                        }
                                        var vip="否";
                                        if(n.isVip=1){
                                            vip="是";
                                        }
                                        data+=`
                            <td>${vip}</td>
                            <td>${state}</td>
                            <td>
                                    <button id="demo-btn-addrow" class="btn btn-info" onclick="updateUser(${n.id})"> 修改</button>
                                    <button id="demo-btn-addrow" class="btn btn-danger" onclick="delUser(${n.id})"> 删除</button>
                            </td>
                        </tr>`;
                                    });

                                    $("#user_table_body").html(data)
                                }
                            }
                        });
                    }
                }
            });
        });
    }
</script>

<script>

    $(function () {
        userList(0,20);
    });
    function addArticle() {
        // itemList();
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn:['保存','取消'],
                yes:function () {
                   saveUser(1);
                }
            })
        })
    }
    //修改用户
    function updateUser(id) {
        userById(id);
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn:['保存','取消'],
                yes:function () {
                    saveUser(0);
                }
            })
        })

    }

    function userList(pageIndex,pageSize){
        $.ajax({
            url: '/backstage/user/userPage',
            type: 'get',
            data:{"pageIndex":pageIndex,"pageSize":pageSize},
            success: function (res) {
                var data ="";
                if(res!=null){
                    $.each(res.list,function(i,n) {
                        data += `<tr>
                            <td>${n.id}</td>
                            <td>${n.userName}</td>
                            <td>${n.email}</td>

                            `;
                        var state="无";
                        if(n.state==5){
                            state="注销";
                        }else if(n.state==6){
                            state="正常";
                        }else if(n.state==7){
                            state="封号";
                        }
                        var vip="否";
                        if(n.isVip==1){
                            vip="是";
                        }
                            data+=`
                            <td>${vip}</td>
                            <td>${state}</td>
                            <td>
                                    <button id="demo-btn-addrow" class="btn btn-info" onclick="updateUser(${n.id})"> 修改</button>
                                    <button id="demo-btn-addrow" class="btn btn-danger" onclick="delUser(${n.id})"> 删除</button>
                            </td>
                        </tr>`;
                    });

                    $("#user_table_body").html(data)
                    page(res.totalSize,res.pageIndex);
                }
            }
        });
    }

    /**
     * 保存用户
     * @param t 1新增 0修改
     * @returns {boolean}
     */
    function saveUser (t) {
        var url='/backstage/user/userAdd';
        if(t==0) {
            url = '/backstage/user/userUpdate';
        }
        var d = {};
        var vals = $(".form-horizontal").serializeArray();
        $.each(vals, function () {
            d[this.name] = this.value;
        });
        var data=JSON.stringify(d);
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            contentType: 'application/json',
            success: function (res) {
                location.href="/backstage/user";
            }
        });
        return false;
    }
    //查询用户状态字典
    function itemList(){
        $.ajax({
            url: '/download/item/itemList',
            type: 'get',
            data:{"dictionaryId":4},
            success: function (res) {
                var data ="<option>请选择</option>";
                if(res!=null){
                    $.each(res,function(i,n) {
                        data += `<option value="${n.id}"> ${n.value} </option>`;
                    });
                    $("#user_state").html(data)
                }
            }
        });
    }
    function delUser( id) {
        $.ajax({
            url: '/backstage/user/userDel',
            type: 'post',
            data: {"id":id},
            // contentType: 'application/json',
            success: function (res) {
                location.href="/backstage/user";
            }
        });
    }
    function userById(id) {
        $.ajax({
            url: '/backstage/user/findUserById',
            type: 'post',
            data: {"id":id},
            // contentType: 'application/json',
            success: function (res) {
                console.log("findById",res)
                // $("#input_name").val(res.name);
                $("#input_username").val(res.userName);
                $("#input_email").val(res.email);
                // $("[name='isVip']").val(res.name);
                $("#input_id").val(res.id);
                $("#user_state").val(res.state);
                var radios = $('[name="isVip"]');
                console.log(radios)
                if (res.isVip=='0'){
                    radios.eq(1).attr("checked", true);
                } else{
                    radios.eq(0).attr("checked", false);
                }

            }
        });
    }

</script>

</html>